<template>
    <div class="echarts" ref="divRef"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';
const props = defineProps({
    option: {
        type: Object,
        default: () => ({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        })
    }
})
const divRef = ref(null);
let chartInstance = null



const initChart = () => {
    chartInstance = echarts.init(divRef.value);
    props.option && chartInstance.setOption(props.option);
}

const resize = () => {
    chartInstance && chartInstance.resize()
}
onMounted(() => {
    // nextTick(() => {
        initChart()
        window.addEventListener('resize', resize)
    // })
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
})

</script>

<style scoped lang="scss">
.echarts {
    width: 100%;
    height: 100%;
    min-height: 100px;
}
</style>